<script setup>
import { ref } from 'vue'
import { uploadfile, delDoc, getDocList } from '@/api/file'
import { FILE_TYPE } from '@/constants/appname'
const props = defineProps({
  appname: String,
  category: String,
  bucketName: String,
})
// 上传文档
const fileUpload = ref([])
const uploadRef = ref()
const handleChange = (file) => {
  console.log(file.raw)
  fileUpload.value.push(file.raw)
}
const upload = async () => {
  if (fileUpload.value.length < 1) {
    ElMessage.warning("请添加上传文件")
    return
  }
  const formdata = new FormData()
  formdata.append("bucketName", props.bucketName)
  formdata.append("appName", props.appname)
  formdata.append("category", props.category)
  for (let i = 0; i < fileUpload.value.length; i++) {
    formdata.append("multipartFile", fileUpload.value[i])
  }
  await uploadfile(formdata).then(res => {
    ElMessage.success(res.data.data)
  })
  uploadRef.value.clearFiles()
  doGetDocList()
}
// 获取文档列表
const docList = ref([])
async function doGetDocList() {
  await getDocList(props.appname, props.category, FILE_TYPE.PDF).then(res => {
    console.log(res.data)
    docList.value = res.data.data
  })
}
doGetDocList()
// 删除文档
async function delDocItem(item) {
  await delDoc(item.id).then(res => {
    ElMessage.success(res.data.data)
  })
  doGetDocList()
}
</script>

<template>
  <el-row class="documents">
    <el-col class="listPage" :span="12" style="padding-left: 30px; overflow: hidden;">
      <div class="title">
        <el-text>文档列表</el-text>
      </div>
      <div class="docList">
        <div class="docItem" v-for="(item, key) in docList" :key="key">
          <el-text size="default" style="text-align: center;" truncated>{{ key + 1 }}.{{ item.name }}</el-text>
          <el-icon color="red" @click="delDocItem(item)" size="16"
            style="line-height: 22px; height: 22px; cursor: pointer;">
            <DeleteFilled />
          </el-icon>
        </div>
      </div>


    </el-col>
    <el-col :span="12">
      <div class="title">
        <el-text>文档上传</el-text>
      </div>
      <el-text type="danger"><el-icon color="red" style="margin-right: 5px;">
          <BellFilled />
        </el-icon>上传同名文件，会覆盖之前已上传文件，请慎重操作</el-text>
      <el-upload accept=".pdf" class="upload" action="#" multiple :on-change="handleChange" :auto-upload="false"
        limit="3" ref="uploadRef" drag>
        <!-- <el-button type="primary">选择文件</el-button>
      <el-button type="success">上传文件</el-button> -->
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          Drop file here or <em>click to upload</em><br>
          <el-text>支持pdf文件上传</el-text>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            <el-button type="success" @click="upload" class="uploadBtn">文件上传</el-button>
          </div>
        </template>
      </el-upload>
    </el-col>

  </el-row>
</template>

<style scoped lang="less">
.el-upload__tip {
  width: 90px;
  height: 40px;
  margin: 20px auto;
}

.title {
  padding: 0 0 30px 0;
}

.el-row {
  margin-bottom: 20px;
}

.upload {
  margin-top: 10px;
}

.docList {
  display: flex;
  height: 70vh;
  flex-direction: column;
  flex-wrap: wrap;

  .docItem {
    display: flex;
    padding: 10px 50px 10px 10px;
    width: 200px;
    justify-content: space-between;
  }
}
</style>